import useChartOption from "@/hooks/chart-option";
import { graphic } from "echarts";

const lineEcharts = (xAxis, chartsData) => {
  const { lineOption } = useChartOption(() => {
    return {
      grid: {
        left: "10%",
        right: "4%",
        top: "6%",
        bottom: "15%",
      },
      xAxis: {
        type: "category",
        data: xAxis,
        boundaryGap: false,
        axisLabel: {
          color: "#9EA7BA99",
          fontSize: 12,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisPointer: {
          show: true,
          lineStyle: {
            color: "#9EA7BA99",
            width: 1,
          },
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: true,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#9EA7BA99",
            width: 1,
            type: "dashed",
          },
        },
      },
      tooltip: {
        trigger: "axis",
        // padding: 0,
        // formatter(params) {
        //   const [firstElement] = params;
        //   return `<div style="padding:2px 4px"; font-size="8px">${Number(
        //     firstElement.value
        //   )}</div>`;
        // },
      },
      series: [
        {
          data: chartsData,
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 8,
          emphasis: {
            focus: "series",
            itemStyle: {
              borderWidth: 2,
              color: "#2A95FF",
              borderColor: "#fff",
            },
          },
          lineStyle: {
            width: 1,
            color: new graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#E4F2FF",
              },
              {
                offset: 0.5,
                color: "#2A95FF",
              },
              {
                offset: 1,
                color: "rgba(111, 66, 251, 1)",
              },
            ]),
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(17, 126, 255, 0.16)",
              },
              {
                offset: 1,
                color: "rgba(17, 128, 255, 0)",
              },
            ]),
          },
        },
      ],
    };
  });
  return lineOption;
};
const pieEcharts = (chartsData) => {
  console.log('chartsData',chartsData);
  
  const { pieOption } = useChartOption(() => {
    return {
      legend: {
        //   left: "60%", // 图例距离左的距离
        //   y: "center", // 图例上下居中
        orient: "vertical", // 图例垂直排列
        right: "8%", // 图例位置在左侧
        show: true,
        icon: "circle", // 图例形状
        itemHeight: 8,
        itemWidth: 8,
        textStyle: {
          fontSize: 12,
          color: "#011948",
        },
        formatter: (name) => {
          const item = chartsData.find((item) => item.name === name);
          return `${name} ${item.value}`;
        },
      },
      tooltip: {
        //   show: false,
        trigger: "item",
      },
      color: [
        "#5fe1e0",
        "#ccdff5",
        "#3C85FF",
        "#53CFFF",
        "#91cc75",
        "#FFA209",
        "#ea7ccc",
        "#fc8452",
        "#5470c6",
        "#FF5D5D",
        "#fac858",
      ],
      series: [
        {
          type: "pie",
          radius: ["35", "45"],
          center: ["35%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          data: chartsData,
          itemStyle: {
            shadowBlur: 8, // 阴影的模糊程度
            shadowColor: "rgba(204, 223, 245, 0.8)", // 阴影颜色
            shadowOffsetX: 2, // 阴影在 X 轴方向的偏移量
            shadowOffsetY: -2, // 阴影在 Y 轴方向的偏移量
          },
        },
      ],
    };
  });
  return pieOption;
};
export  {lineEcharts, pieEcharts };